<template>
	<!-- 10.25 将拼团文字修改掉 -->
	<view class="app-button-button dir-left-nowrap">
		<view class="app-home dir-top-nowrap main-center cross-center" @click="tolist">
			<image class="app-icon" :src="catsall.pic_url"></image>
			<text class="app-text u-line-1" style="width:100rpx;text-align: center;">{{catsall.name}}</text>
		</view>
		<view class="app-home dir-top-nowrap main-center cross-center" @click="custom">
			<image class="app-icon" src="../../../static/image/summary-phone.png"></image>
			<text class="app-text">客服</text>
		</view>
		<!-- item.goods_stock > 0 && -->
		<view v-if="start_time && groups[0].attr[2].stock != 0 && isabuy" class="app-button dir-left-nowrap">
			<view v-if="is_alone_buy === 1 && (groups[0].attr[0].stock != 0 && groups[0].attr[1].stock != 0)"
				@click.stop="turnOn(false)" class="app-but but dir-top-nowrap box-grow-1"
				:class="theme === 'b' || theme === 'f' ? theme + '-s-back ' + theme + ' ' + 'text' : theme === 'a' ? 'app-single-button' : theme + '-s-back ' + theme + ' ' + theme + '-m-text'">
				<text class="price">
					定金{{singlePrice}}
				</text>
				<text class="app-text">一人购买两件</text>
			</view>
			<view class="app-but but dir-top-nowrap box-grow-1" style="color: #ffffff;"
				v-if="groups[0].attr[0].stock != 0 || groups[0].attr[1].stock != 0"
				:class="theme === 'a' ? 'app-pt-button' : theme+ '-m-back ' + theme" @click="turnOn(true)">
				<text class="price">定金{{group_price}}</text>
				<text class="app-text">{{groups[0].groups.people_num}}人购买</text>
			</view>
			<view class="app-but app-but-width" v-else style="background-color: #CDCDCD;color: #fff;">
				<view class="but dir-top-nowrap">
					<text class="out-text" v-if="!start_time">活动未开始</text>
					<text class="out-text" v-else>已售罄</text>
				</view>
			</view>
		</view>
		<view v-else-if="start_time && groups[0].attr[0].stock != 0 && !isabuy" class="app-button dir-left-nowrap">
			<view class="app-but but dir-top-nowrap box-grow-1" style="color: #ffffff;"
				v-if="groups[0].attr[0].stock != 0" :class="theme === 'a' ? 'app-pt-button' : theme+ '-m-back ' + theme"
				@click="turnOn(true)">
				<text class="price">{{group_price}}</text>
				<text class="app-text">{{groups[0].groups.people_num}}人购买</text>
			</view>
			<view class="app-but app-but-width" v-else style="background-color: #CDCDCD;color: #fff;">
				<view class="but dir-top-nowrap">
					<text class="out-text" v-if="!start_time">活动未开始</text>
					<text class="out-text" v-else>已售罄</text>
				</view>
			</view>
		</view>
		<view class="app-button dir-left-nowrap" v-else>
			<view class="app-but app-but-width" style="background-color: #CDCDCD;color: #fff;">
				<view class="but dir-top-nowrap">
					<text class="out-text" v-if="!start_time">活动未开始</text>
					<text class="out-text" v-else>已售罄</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from "vuex";
	export default {
		name: 'app-bottom-button',

		props: {
			selectAttr: Object,
			selectGroupAttrId: {
				type: [String, Number]
			},
			is_alone_buy: {
				type: Number,
			},
			groups: {
				type: Array,
				default () {
					return [];
				}
			},
			level_show: {
				type: Number,
				default () {
					return 0;
				}
			},
			member_price_min: {
				type: String,
				default () {
					return '0.00';
				}
			},
			catsall: Object,
			price: {
				type: String,
				default () {
					return '0.00';
				}
			},
			price_member_min: {
				type: Number,
				default () {
					return 0;
				}
			},
			pt: {
				type: Boolean,
			},
			item: Object,
			start_time: Boolean,
			end_time: Boolean,
			theme: String,
			kefu: String,
			pintuanList: Array,
			isabuy: Boolean
		},

		data() {
			return {
				group_price: ''
			}
		},
		mounted() {
			this.get_group();
		},
		methods: {
			turnOn(bool) {
				this.$emit('click', bool);
			},
			get_group() {
				if (this.$validation.isEmpty(this.selectAttr)) {
					if (this.level_show === 1) {
						if (Number(this.member_price_min) === 0) {
							this.group_price = '免费';
						} else {
							this.group_price = `￥${this.member_price_min}`;
						}
					} else {
						if (this.pintuanList.length > 0) {
							if (this.pintuanList[0].abbuy_type == 'A') {
								if (Number(this.groups[0].attr[1].price) === 0) {
									this.group_price = '免费';
								} else {
									this.group_price = `￥${this.groups[0].attr[1].price}`;
								}
							} else {
								if (Number(this.groups[0].attr[0].price) === 0) {
									this.group_price = '免费';
								} else {
									this.group_price = `￥${this.groups[0].attr[0].price}`;
								}
							}
						} else {
							if (Number(this.groups[0].attr[0].price) === 0) {
								this.group_price = '免费';
							} else {
								this.group_price = `￥${this.groups[0].attr[0].price}`;
							}
						}
					}
				} else {
					if (this.level_show === 1) {
						if (Number(this.selectAttr.price_member) === 0) {
							this.group_price = '免费';
						} else {
							this.group_price = `￥${this.selectAttr.price_member}`;
						}
					} else {
						if (Number(this.selectAttr.price) === 0) {
							this.group_price = '免费';
						} else {
							this.group_price = `￥${this.selectAttr.price}`;
						}
					}
				}
			},
			router() {
				uni.reLaunch({
					url: `/pages/index/index`
				});
			},
			tolist() {
				uni.navigateTo({
					url: `/plugins/pt/index/index?cat_id=${this.catsall.id}&title=${this.catsall.name}`
				});
			},
			// 客服
			custom() {
				// 9.8 注释
				/* if (this.kefu != '') {
					uni.navigateTo({
						url: '/pages/web/web?url=' + encodeURIComponent(this.kefu)
					})
				} else {
					uni.navigateTo({
						url: '/pages/web/web?url=' + this.mall.setting.web_service_url
					})
				} */
				// 9.8 修改客服
				if (wx.openCustomerServiceChat) {
					wx.openCustomerServiceChat({
						extInfo: {
							url: 'https://work.weixin.qq.com/kfid/kfc2132bcfa45f0fb28'
						},
						corpId: 'ww4e635c5ebdf96587',
						showMessageCard: true
					})
				} else {
					uni.showModal({
						title: '版本不支持',
						content: '请下载最新版本微信',
						showCancel: false,
						confirmText: '我知道了'
					})
				}
			},
		},
		computed: {
			// 单价
			singlePrice() {
				if (this.pt) return;
				if (this.$validation.isEmpty(this.selectAttr)) {
					if (this.level_show === 1) {
						if (Number(this.groups[0].price_max) === 0) {
							return '免费';
						} else {
							return `￥${this.groups[0].price_max}`
						}
					} else {
						if (Number(this.groups[0].price_max) === 0) {
							return '免费';
						} else {
							return `￥${this.groups[0].price_max}`
						}
					}
				} else {
					if (this.level_show === 1) {
						if (Number(this.groups[0].price_max) === 0) {
							return '免费';
						} else {
							return `￥${this.groups[0].price_max}`;
						}
					} else {
						if (Number(this.groups[0].price_max) === 0) {
							return '免费';
						} else {
							return `￥${this.groups[0].price_max}`
						}
					}
				}
			},
			...mapState({
				mall: state => state.mallConfig.mall
			})
		},

		watch: {
			selectAttr: {
				handler() {
					if (this.pt) {
						if (this.$validation.isEmpty(this.selectAttr)) {
							if (this.level_show === 1) {
								if (Number(this.member_price_min) === 0) {
									this.group_price = '免费';
								} else {
									this.group_price = `￥${this.member_price_min}`;
								}

							} else {
								if (Number(this.groups[0].price_min) === 0) {
									this.group_price = '免费';
								} else {
									this.group_price = `￥${this.groups[0].price_min}`;
								}
							}

						} else {
							if (this.level_show === 1) {
								if (Number(this.selectAttr.price_member) === 0) {
									this.group_price = '免费';
								} else {
									this.group_price = `￥${this.selectAttr.price_member}`;
								}
							} else {
								if (Number(this.selectAttr.price) === 0) {
									this.group_price = '免费';
								} else {
									this.group_price = `￥${this.selectAttr.price}`;
								}
							}
						}
					}
				},
				immediate: true,
				deep: true,
			},

			groups: {
				handler(data) {
					if (data.length > 0) {
						this.$nextTick(() => {
							this.get_group();
						})
					}
				},
				immediate: true
			}
		}
	}
</script>

<style scoped lang="scss">
	.app-pt-button {
		background: linear-gradient(140deg, #ff9460, #ff5c5c);

		text {
			color: white;
		}
	}

	.app-button-button {
		height: #{110rpx};
		width: #{750rpx};

		.app-home {
			width: #{110rpx};
			height: 100%;
			/* width: 13%;
			height: #{110rpx}; */
			background-color: white;

			.app-icon {
				width: #{40rpx};
				height: #{40rpx};
			}

			.app-text {
				font-size: #{19rpx};
				color: #707070;
			}
		}

		.app-button {
			width: 87%;
			height: #{110rpx};

			.app-but-width {
				width: 100% !important;
			}

			.app-but {
				height: #{110rpx};
				width: 50%;
			}

			.price {
				font-size: #{28rpx};
				margin-top: #{18rpx};
			}

			.app-text {
				font-size: #{24rpx};
				margin-top: #{8rpx};
			}

			.out-text {
				line-height: #{110rpx};
			}

			.app-single-button {
				background-color: #feeeee;

				text {
					color: #ff5c5c;
				}
			}

			.but {
				text-align: center;
			}
		}
	}

	.text {
		color: #ffffff;
	}
</style>
